{% block sw_product_stream_grid_preview_content %}
<div class="sw-product-stream-grid-preview">
    {% block sw_product_stream_grid_preview_search_field_label %}
    <div class="sw-product-stream-grid-preview__toolbar">
        {% block sw_product_stream_grid_preview_search_field %}
        <sw-simple-search-field
            v-model:value="searchTerm"
            size="small"
            variant="form"
            :delay="750"
            :disabled="!filters"
            class="sw-product-stream-grid-preview__search-field"
            @search-term-change="onSearchTermChange"
        />
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_product_stream_grid_preview_grid %}
    <sw-data-grid
        v-if="total"
        class="sw-product-stream-grid-preview__grid"
        :data-source="products"
        :columns="productColumns"
        :show-selection="showSelection"
        :show-actions="false"
        :show-previews="true"
        :plain-appearance="true"
        :is-loading="isLoading"
        @selection-change="onSelectionChange"
    >

        {% block sw_product_stream_grid_preview_grid_columns %}
        <template #column-name="{ item, column }">
            {% block sw_product_stream_grid_preview_grid_column_name %}
            <router-link
                v-if="column.routerLink"
                :to="{ name: column.routerLink, params: { id: item.id } }"
            >
                <sw-product-variant-info :variations="item.variation">
                    {{ item.name || item.translated.name }}
                </sw-product-variant-info>
            </router-link>
            <sw-product-variant-info
                v-else
                :variations="item.variation"
            >
                {{ item.name || item.translated.name }}
            </sw-product-variant-info>
            {% endblock %}
        </template>

        <template #column-manufacturer.name="{ item, column }">
            {% block sw_product_stream_grid_preview_grid_column_manufacturer %}
            <router-link
                v-if="column.routerLink && item.manufacturerId"
                :to="{ name: column.routerLink, params: { id: item.manufacturerId } }"
            >
                {{ item.manufacturer.name || item.manufacturer.translated.name }}
            </router-link>
            <template v-else-if="item.manufacturerId">
                {{ item.manufacturer.name || item.manufacturer.translated.name }}
            </template>
            {% endblock %}
        </template>

        <template #column-active="{ item }">
            {% block sw_product_stream_grid_preview_grid_column_active %}
            <sw-data-grid-column-boolean
                :value="item.active"
                :is-inline-edit="false"
            />
            {% endblock %}
        </template>

        <template #column-price="{ item }">
            {% block sw_product_stream_grid_preview_grid_column_price %}
            {{ currencyFilter(getPriceForDefaultCurrency(item), systemCurrency.isoCode) }}
            {% endblock %}
        </template>

        <template #column-stock="{ item }">
            {% block sw_product_stream_grid_preview_grid_column_stock %}
            {{ item.stock }}
            {% endblock %}
        </template>
        {% endblock %}

        <slot name="additional-columns"></slot>

        <template #pagination>
            {% block sw_product_stream_grid_preview_grid_pagination %}
            <sw-pagination
                v-bind="{ total, page, limit }"
                :total-visible="7"
                :auto-hide="false"
                @page-change="onPageChange"
            />
            {% endblock %}
        </template>
    </sw-data-grid>
    {% endblock %}

    {% block sw_product_stream_grid_preview_empty_state %}
    <slot name="empty-state">
        <mt-empty-state
            v-if="!total && !isLoading"
            icon="solid-products"
            :headline="emptyStateMessage"
        />
    </slot>
    {% endblock %}
</div>
{% endblock %}
